<template>
<el-card class="box-card " style="">
  <div slot="header" class="clearfix">
    <span style="font-size: 40px;font-family: 华文行楷">我的信息</span>
    <el-button type="primary" style="float: right" @click="dialogFormVisible = true">编辑</el-button>

    <el-dialog title="个人信息" :visible.sync="dialogFormVisible":close-on-click-modal="false" :close-on-press-escape="false":show-close="false" style="height: 800px;flex: auto" >
      <div>
      <div style="float: left">
      <el-form :model="form">
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off" style="width: 250px"></el-input>
        </el-form-item>
      </el-form>
        </div>
      <div style="float: right">
        <el-form :model="form">
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="form.sex" autocomplete="off" style="width: 250px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      </div>

      <div>
        <div style="float: left">
          <el-form :model="form">
            <el-form-item label="职业" :label-width="formLabelWidth">
              <el-input v-model="form.profession" autocomplete="off" style="width: 250px"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div style="float: right">
          <el-form :model="form">
            <el-form-item label="手机号码" :label-width="formLabelWidth">
              <el-input maxlength="11" show-word-limit v-model="form.phone" autocomplete="off" style="width: 250px"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div>
        <div style="float: left">
          <el-form :model="form">
            <el-form-item label="邮箱" :label-width="formLabelWidth">
              <el-input v-model="form.email" autocomplete="off" style="width: 250px"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div style="float: right">
          <el-form :model="form">
            <el-form-item label="住址" :label-width="formLabelWidth">
              <el-input v-model="form.address" autocomplete="off" style="width: 250px"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div style="float: left">
      <div>
        <el-form :model="form">
          <el-form-item label="联系地址" :label-width="formLabelWidth">
            <el-input maxlength="30" show-word-limit v-model="form.contact" autocomplete="off" style="width: 350px;" ></el-input>
          </el-form-item>
        </el-form>
     </div>
  </div>
<div>
      <div style="padding-left: 500px">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="UpdateInfo">保 存</el-button>
      </div>
  </div>
    </el-dialog>

</div>
  <div>
    <el-descriptions border column="2">
      <el-descriptions-item label="账号" label-class-name="my-label" content-class-name="my-content" labelStyle="text-align:center" >{{this.ruleForm2.id}}</el-descriptions-item>
      <el-descriptions-item label="年龄"  contentStyle="height: 80px;width:400px" labelStyle="text-align:center">{{this.ruleForm2.age}}</el-descriptions-item>
      <el-descriptions-item label="性别" contentStyle="height: 80px;width:400px" labelStyle="text-align:center">{{this.ruleForm2.sex}}</el-descriptions-item>
      <el-descriptions-item label="职业" labelStyle="text-align:center">
        {{this.ruleForm2.profession}}
      </el-descriptions-item>
      <el-descriptions-item label="联系地址" contentStyle="height: 80px" labelStyle="text-align:center">{{this.ruleForm2.contact}}</el-descriptions-item>
      <el-descriptions-item label="注册日期" labelStyle="text-align:center">{{this.ruleForm2.date}}</el-descriptions-item>
      <el-descriptions-item label="手机号" contentStyle="height: 80px" labelStyle="text-align:center">{{this.ruleForm2.phone}}</el-descriptions-item>
      <el-descriptions-item label="邮箱" labelStyle="text-align:center">{{this.ruleForm2.email}}</el-descriptions-item>
      <el-descriptions-item label="住址" contentStyle="height: 80px" labelStyle="text-align:center">{{this.ruleForm2.address}}</el-descriptions-item>
      <el-descriptions-item label="备注" labelStyle="text-align:center">{{this.ruleForm2.remark}}</el-descriptions-item>

    </el-descriptions>



  </div>

</el-card>
</template>


<script>
  import {perInfo,userupdate} from "../../api";

  export default {
    inject:['reload'],
    data() {
      return {
        ruleForm2: [{
          id: '',
          age: '',
          sex:'',
          profession:'',
          contact:'',
          date:'',
          phone:'',
          email:'',
          address:'',
          remark:'',
        }],

        dialogTableVisible: false,
        dialogFormVisible: false,
        form: [{
          age: '',
          sex:'',
          profession:'',
          contact:'',
          phone:'',
          email:'',
          address:'',
        }],
        formLabelWidth: '80px'
      }

    },
    methods:{
      //用户信息查询
      PersonInfo()
      {
        perInfo({id:window.localStorage.getItem('id')})
          .then((res=>{
            //console.log(res.data.data[0].id)
            this.ruleForm2=res.data.data[0]
            this.form=res.data.data[0]
            if(res.data.data[0].remark==='0')
            {
              this.ruleForm2.remark='普通员工'
            }else
            {
              this.ruleForm2.remark='管理员'
            }
          }))
      },
      cancel(){
        this.dialogFormVisible=false
        this.reload()
      },
      UpdateInfo()
      {
        userupdate({id:window.localStorage.getItem('id'),
          sex:this.form.sex,
          age:this.form.age,
          profession:this.form.profession,
          contact:this.form.contact,
          email:this.form.email,
          phone:this.form.phone,
          address:this.form.address,
        }).then((res=>{
          //console.log(res.data.code)
          if(res.data.code===200)
          {
            this.$message.success("修改成功")
            this.dialogFormVisible=false
            this.reload()
          }
          else
          {
            this.$message.error("操作失败")
          }
        }))
      }
    },

    created() {
      this.PersonInfo()

    }
  }
</script>
<style>

  .text {
    font-size: 18px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 1200px;
  }
  /*.my-label {*/
  /*  background: #E1F3D8;*/
  /*}*/

  /*.my-content {*/
  /*  background: #E1F3D8;*/
  /*}*/
</style>
